<template>
  <div class="box">
    <header>
      <div>
        <van-nav-bar
          class="back"
          left-text="＜返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </div>
      <section>
        <span><input type="text" name="" placeholder="搜索" /></span>
        <span>点餐</span>
        <span>评价4.5</span>
        <span>商家</span>
      </section>
    </header>
    <main>
      
    </main>
    <footer>
      <div>
        <img src="../assets/3.png" alt="" />
      </div>
      <div>
        <p class="price">总价:￥{{ getPrice }}</p>
        <p class="Desc">总数量：{{ getSum }}</p>
      </div>
      <div class="jisuan">去结算</div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "Sort",
  data() {
    return {};
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
  },
};
</script>

<style lang="css" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff;
}
header {
  min-height: 3.5rem;
  padding-left: 10px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  flex-wrap: wrap;
  border-bottom: 2px solid rgb(245, 245, 245);
}
header .back {
  text-align: left;
  font-size: 14px;
  color: rgb(52, 184, 236);
}
header span {
  /* background-color: gray; */
  margin-right: 20px;
  margin-bottom: 10px;
}
header span input {
  width: 60px;
  border-radius: 15px;
  vertical-align: middle;
  text-align: center;
  background-color: rgb(245, 245, 245);
  outline: none;
}
header span:hover {
  color: rgb(17, 171, 232);
  border-bottom: 1px solid rgb(17, 171, 232);
}
main {
  flex: 1;
  overflow: auto;
  background-color: lightgray;
}

footer {
  height: 4.1667rem;
  background-color: #474747;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

footer img {
  width: 3.5rem;
  height: 3.1667rem;
  margin-top: -10px;
}
footer .jisuan {
  background-color: rgb(16, 199, 16);
  border-radius: 10px;
  color: #fff;
  width: 100px;
  height: 3rem;
  line-height: 3rem;
  font-size: 20px;
  text-align: center;
}
footer .price {
  color: #fff;
  font-size: 18px;
}
footer .Desc {
  color: rgb(184, 184, 184);
  font-size: 14px;
}
</style>